<template>
	<view class="container">
		<!-- <view>sdf</view> -->
		<view class="title_view" :style="'height:' + titleHeight + 'px;z-index:1'">
			<!-- sdfsdf -->
			<view class="title bh-row bh-justify-space-between "
				:style="'height:' + titleHeight + 'px;padding-top:' + capsuleTop + 'px'">
				<view class="left_arrow_box" @click="back">
					<image src="../../static/images/left_arrow.svg" mode=""></image>
				</view>
				<view class="edit-info" style="color: black;">店铺详情</view>
				<view class="" style="width: 80rpx;"></view>
			</view>
		</view>
		<view style="position: relative;width: 50vh;height: 60vh;">
			<!-- 上面控制定位标显示展示大体位置 -->
			<view class="map-container">
				<view style="border-radius: 8rpx;">
					<map id="mapSelected" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude"
						:markers="mapInfo.makers" :controls="controls" :scale="18" 
						@controltap="controltap"
						@tap="clickMap" 
						@regionchange="regionchange"
						@markertap="clickMarker"
						@labeltap="clickLabel"
						@callouttap="clickCall"></map>
				</view>
			</view>
		</view>
		<!-- @longpress="copyLocation" -->
			<view 
					class="bottom-box">
					<view style="padding-left: 20rpx;margin-top: 20rpx;">
						{{postDto.address?postDto.area+postDto.address:"无"}}
					</view>
					<view style="display: flex;justify-content: center;">
						<view @click="doCopyAddr" class="copyBtn">
							复制地址信息
						</view>
					</view>
					
				</view>
	</view>
</template>

<script lang="ts">
import check_utils from '../../components/custom_views/check_utils';

	export default {
		components: {
		},
		mixins: [
		],
		data() {
			return {
				capsuleHeight: 0,
				capsuleTop: 0,
				titleHeight: 0,
				postDto: {
				},
				dotsStyle: {
					bottom: 12,
					backgroundColor: 'rgba(255, 255, 255, 0.55)',
					selectedBackgroundColor: 'background: rgba(255, 255, 255, 0.55)'
				},
				// 地图信息
				latitude: 39.909, // 默认纬度
				longitude: 116.39742, // 默认经度(北京天安门)
				covers: [{
					id: 110,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
					width: "20",
					height: "20"
				}],
				controls: [{ // 控件
					id: 99,
					position: { // 控件位置
						left: 160,
						top: 120
					},
					iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
				}],
			}
		},
		computed: {
			mapInfo() {
				return {
					longitude: this.postDto.lng,
					latitude: this.postDto.lat,

					makers: [{
						id: 110,
						latitude: this.postDto ? this.postDto.lat : 39.949570,
						longitude: this.postDto ? this.postDto.lng : 116.451019,
						// iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
						iconPath: '../../static/images/detail/location.png',
						width: "40",
						height: "40"
					}]
				}
			},
		},
		methods: {
			doCopyAddr(){
				let that = this
				uni.setClipboardData({
					showToast: false,
					data: that.postDto.area + that.postDto.address, // data的值为你要复制的内容
					success: res => {
						uni.showToast({
							title: '',
							icon: 'none'
						})
						// check_utils.showCustToast('复制成功', 'success')
					}
				});
			},
			back() {
				uni.navigateBack()
			},

			initDetail(options) {
				console.log('初始化参数', options)
				let that = this
				if (options.detailJson) {

					this.postDto = JSON.parse(decodeURIComponent(options.detailJson))
				}
			},
			controltap(e){
				console.log('点击控件时触发', e)
			},
			clickMap(e){
				console.log('点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度', e)
			},
			regionchange(e){
				console.log('视野发生变化时触发', e)
			},
			clickMarker(e){
				console.log('点击标记点时触发，e.detail = {markerId}', e)
			},
			clickLabel(e){
				console.log('点击label时触发，e.detail = {markerId}', e)
			},
			clickCall(e){
				console.log('点击标记点对应的气泡时触发，e.detail = {markerId}', e)
			},
			  copyLocation() {
                uni.setClipboardData({
                    data: this.postDto.address
                })
            }

		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			this.initDetail(options)
			let capsule = uni.getMenuButtonBoundingClientRect()
			this.capsuleTop = capsule.top
			console.log(capsule)
			this.capsuleHeight = capsule.height
			this.titleHeight = capsule.height + 10 + capsule.top
		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>
<style scoped lang="scss">
	@import url(../../static/css/base.css);

	page {
		height: 100vh;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
		// position: absolute;
		top: 0;
		overflow: scroll;
	}

	.black-view {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.05);
		z-index: 1;
	}

	.title_view {
		position: fixed;
		right: 0;
		left: 0;

		.title {

			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			color: #FFFFFF;
			height: 40rpx;
			padding: 0 30rpx 10px 30rpx;
			box-sizing: border-box;
			width: 100%;
			top: 0;
			left: 0;

			.left_arrow_box {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 22rpx;
					height: 38rpx;
					margin: 21rpx 0;
				}
			}
		}
	}

	.map-container {
		// height: 400rpx;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	map {
		width: 50vh;
		height: 100vh;
	}
	.bottom-box{
		    position: absolute;
		    width: 100%;
		    height: 200rpx;
		    bottom: 0;
		    color: inherit;
		    border: solid white 1px;
		    border-radius:10rpx;
		    background: white;
			
	}
	.copyBtn{
		    width: 100px;
		    text-align: center;
		    padding: 10px;
		    border: solid 1rpx cornflowerblue;
		    color: white;
		    border-radius: 30px;
		    background: cornflowerblue;
	}
</style>